<template>
	<table-layout
		show-summary
		:summary-method="getSummaries"
		:header-cell-style="{ color: '#000' }"
		:fetch-list="wmsInventoryPosition"
		:query-form="props.queryForm"
		border
		@selection-change="handleSelectionChange"
		ref="dataTableRef"
		@mouseEnterCell="(row) => (rowIdx = row.id)"
		@mouseLeaveCell="rowIdx = null"
	>
		<!-- :fetch-list="wmsInventoryPosition" -->
		<template v-slot:tableLayout>
			<el-table-column type="selection" width="80" fixed="left" />
			<el-table-column
				v-for="(col, ind) in props.thList"
				:key="ind"
				:label="col.name"
				:prop="col.prop"
				:fixed="col.fixed ? col.fixed : false"
				:min-width="col.width ? col.width : '140'"
				:sortable="col.sortable"
			>
				<!-- th header -->
				<template #header>
					<div v-if="col.tooltip" style="display: flex; align-items: center">
						{{ col.name }}
						<el-tooltip effect="dark" :content="col.tooltip" placement="top">
							<el-icon><InfoFilled /></el-icon>
						</el-tooltip>
					</div>
					<span v-else>{{ col.name }}</span>
				</template>
				<template v-slot="scope">
					<template v-if="col.name === '产品名称/SKU'">
						<div>
							{{ scope.row.skuName || '--' }}
							<span v-if="scope.row.skuName" @click="() => copyText(scope.row.skuName)">
								<el-icon class="text-xs cursor-pointer" v-if="rowIdx === scope.row.id">
									<DocumentCopy />
								</el-icon>
							</span>
						</div>
						<div style="margin-top: 12px">
							{{ scope.row.skuCode || '--' }}
							<span v-if="scope.row.skuCode" @click="() => copyText(scope.row.skuCode)">
								<el-icon class="text-xs cursor-pointer" v-if="rowIdx === scope.row.id">
									<DocumentCopy />
								</el-icon>
							</span>
						</div>
					</template>
					<template v-else-if="col.name === '产品图片'">
						<ewt-image
							:url="scope.row.picUrl"
							style="width: 36px; height: 36px; object-fit: contain; display: block; cursor: pointer"
							@click="showImageViewer(scope.row.picUrl)"
						/>
						<!-- <div v-else class="non-pic">无图</div> -->
					</template>
					<template v-else-if="col.name === 'MSKU/FNSKU'">
						<div>{{ scope.row.msku || '--' }}</div>
						<div style="margin-top: 12px">{{ scope.row.fnsku || '--' }}</div>
					</template>
				</template>
			</el-table-column>
		</template>
	</table-layout>
	<ewt-image-viewer v-if="state.imageViewer" :url-list="[state.imageViewer]" @close="closeViewer" />
</template>
<script setup lang="tsx" name="seatList">
import { wmsInventoryPosition } from '/@/api/inventory/index';
import CommonFunction from '/@/utils/commonFunction';
const { copyText } = CommonFunction();
const rowIdx = ref(null);
const props = defineProps({
	queryForm: {
		type: Object,
		default: () => {
			return {};
		},
	},
	thList: {
		type: Array,
		default: () => {
			return [];
		},
	},
});
const state = reactive({
	imageViewer: '',
});
const emit = defineEmits(['updateCheckedList']);
const handleSelectionChange = (val) => {
	emit('updateCheckedList', val);
};
const showImageViewer = (img) => {
	state.imageViewer = img;
};
const closeViewer = () => {
	state.imageViewer = '';
};
const toRefresh = (v) => {
	dataTableRef?.value.refresh(v);
};
const getSummaries = (param: SummaryMethodProps) => {
	const { columns, data } = param;
	const sums: string[] = [];
	let sumTh = ['usageQty', 'availableQty', 'whQty'];
	columns.forEach((column, index) => {
		if (sumTh.indexOf(column.property) !== -1) {
			const values = data.map((item) => Number(item[column.property]));
			if (!values.every((value) => Number.isNaN(value))) {
				sums[index] = `${values.reduce((prev, curr) => {
					let value = Number(curr);
					if (!Number.isNaN(value)) {
						return prev + curr;
					} else {
						return prev;
					}
				}, 0)}`;
			} else {
				sums[index] = '';
			}
		}
	});
	// 单独处理
	sums[0] = '当前页合计';
	return sums;
};
const dataTableRef = ref();
defineExpose({
	toRefresh,
	dataTableRef,
});
</script>
<style lang="scss" scoped>
.non-pic {
	background: rgba(11, 16, 25, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.03);
	color: rgba(11, 16, 25, 0.12);
	border-radius: 2px;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 36px;
	height: 36px;
	line-height: 36px !important;
	text-align: center;
}
</style>